<template>
    <div class="aside">
        <div class="recommend">
            <div class="title">热度榜</div>
            <hr>
            <div class="recommend-list">
                <ul>
                    <li v-for="(pop,index) in popList" @click="turnToPopForum($event,pop['forumID'])"><span ref="pop">{{index+1}}</span>{{pop['title']}}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "recomment",
        data(){
            return{
                popList:[]
            }
        },
        created(){
            this.request({
                url:'/forum/getpop'
            }).then(res=>{
                for(let i=0;i<res.data.length;i++)
                    this.popList.push(res.data[i]);
            });
        },
        updated(){
            for(let i=3;i<this.$refs['pop'].length;i++){
                this.$refs['pop'][i].style.backgroundColor = '#ccd0d7'
            }
        },
        methods:{
            turnToPopForum(event,forumID){
                this.$router.replace({
                    path:'/forumcontent',
                    query:{
                        forumID:forumID
                    }}).catch(error=>error);
                this.$emit('change-page');

            }
        }
    }
</script>

<style scoped>
    .aside{
        background-color: white;
        border-radius: 6px;
        /*margin-top: 10px;*/
        border: 1px solid #eee;
        padding: 10px;
    }
    .recommend{
        padding: 10px 20px;
    }
    .recommend-list{

    }
    .recommend-list>ul li{
        margin-bottom: 10px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        cursor: pointer;
    }
    .recommend-list>ul li>span{
        height: 18px;
        width: 18px;
        display: block;
        float: left;
        margin-top: 6px;
        background-color: rgb(242,93,142);
        color: white;
        border-radius: 4px;
        margin-right: 5px;
        text-align: center;
        line-height: 18px;
    }
    .title{
        margin: 10px 0;
        font-size: 20px;
    }

</style>